page {
  height: 100%;

  .self-info {
    height: 100%;
    background-color: #f8f7fa;
    padding: 0 20rpx;

    .page-header {
      margin: 0 -20rpx;
      background-color: #7879f1;
      background-image: none;
      padding: 64rpx 24rpx 32rpx;
      color: #fff;
      border-bottom-right-radius: 52rpx;
      border-bottom-left-radius: 52rpx;
      font-size: 28rpx;
    }

    .mock-page-header {
      display: flex;
      align-items: flex-end;
      margin: 0 -20rpx;
      background-color: #7879f1;
      background-image: none;
      padding: 64rpx 24rpx 32rpx;
      color: #fff;
      border-bottom-right-radius: 52rpx;
      border-bottom-left-radius: 52rpx;
      font-size: 28rpx;

      .mock-avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 16rpx;
        margin-right: 10rpx;
        background-color: rgb(221, 219, 219);
      }
    }

    .view-report {
      margin-top: 28rpx;
      padding: 24rpx 28rpx;
      background-color: #fff;
      border-radius: 16rpx;
      box-shadow: 0 0 3rpx rgba(0, 0, 0, 0.03);

      @icon-size: 48rpx;

      .icon-file {
        display: inline-block;
        width: @icon-size;
        height: @icon-size;
        background-image: url("../../assets/images/file.svg");
        background-repeat: no-repeat;
        background-size: cover;
        vertical-align: middle;
        margin-right: 14rpx;
      }

      text {
        vertical-align: middle;
        color: #4741a8;
        font-size: 28rpx;
      }

      .icon-right {
        display: block;
        width: @icon-size;
        height: @icon-size;
        background-image: url("../../assets/images/right-arrow.svg");
        background-repeat: no-repeat;
        background-size: cover;
        float: right;
      }
    }

    .menu-list {
      display: flex;
      margin-top: 28rpx;
      flex-wrap: wrap;
      background-color: #fff;
      padding: 22rpx;

      .menu-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: calc(25% - 28rpx);
        text-align: center;

        &:not(:last-child) {
          margin-right: 28rpx;
        }

        text {
          font-size: 28rpx;
        }

        @icon-size: 64rpx;
        .icon {
          width: @icon-size;
          height: @icon-size;
          margin-bottom: 8rpx;
        }

        .icon-order {
          background-image: url("../../assets/images/bag.svg");
          background-repeat: no-repeat;
          background-size: cover;
        }

        .icon-device-manage {
          background-image: url("../../assets/images/device.svg");
          background-repeat: no-repeat;
          background-size: cover;
        }

        .icon-privacy {
          background-image: url("../../assets/images/privacy.svg");
          background-repeat: no-repeat;
          background-size: cover;
        }
      }
    }
  }
}
